<template>
  <view class="floating-pet" :class="[currentAnimation, { 'dragging': isDragging }]">
    <!-- 宠物主体 - 纯悬浮设计 -->
    <view class="pet-main">
      <!-- 宠物耳朵 -->
      <view class="pet-ear left"></view>
      <view class="pet-ear right"></view>
      
      <!-- 宠物身体 -->
      <view class="pet-body">
        <!-- 眼睛 -->
        <view class="pet-eye left">
          <view class="pupil"></view>
        </view>
        <view class="pet-eye right">
          <view class="pupil"></view>
        </view>
        
        <!-- 嘴巴 -->
        <view class="pet-mouth"></view>
      </view>
      
      <!-- 四肢 -->
      <view class="pet-limb left"></view>
      <view class="pet-limb right"></view>
      
      <!-- 尾巴 -->
      <view class="pet-tail"></view>
    </view>
    
    <!-- 悬浮状态指示器 -->
    <view class="floating-status" v-if="showStatus">
      <view class="status-dot mood" :class="{ 'low': petData.mood < 30 }"></view>
      <view class="status-dot hunger" :class="{ 'low': petData.hunger < 20 }"></view>
      <view class="status-dot energy" :class="{ 'low': petData.energy < 15 }"></view>
    </view>
    
    <!-- 宠物状态指示器（紧急状态显示） -->
    <view class="emergency-indicators">
      <view 
        v-if="petData.mood < 20" 
        class="emergency-indicator mood-critical"
      >
        😢
      </view>
      <view 
        v-if="petData.hunger < 10" 
        class="emergency-indicator hunger-critical"
      >
        🍽️
      </view>
      <view 
        v-if="petData.energy < 10" 
        class="emergency-indicator energy-critical"
      >
        😴
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PetAvatar',
  props: {
    petData: {
      type: Object,
      required: true
    },
    currentAnimation: {
      type: String,
      default: 'idle'
    },
    isDragging: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showOriginalAvatar: false, // 控制是否显示原始头像
      showStatus: true // 控制是否显示状态指示器
    }
  },
  methods: {
    handleImageError() {
      console.log('宠物头像加载失败')
      this.showOriginalAvatar = false
    }
  }
}
</script>

<style scoped>
/* 全局重置样式 - 排除宠物身体部分 */
.floating-pet > *:not(.pet-main):not(.pet-body):not(.pet-eye):not(.pet-ear):not(.pet-limb):not(.pet-tail):not(.floating-status):not(.emergency-indicators) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 悬浮宠物容器 */
.floating-pet {
  position: relative;
  width: 100rpx;
  height: 100rpx;
  /* 彻底移除所有背景和边框 */
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  /* 添加悬浮阴影效果 */
  filter: drop-shadow(0 8rpx 16rpx rgba(0, 0, 0, 0.15));
}

/* 确保所有子元素都是透明的 */
.floating-pet > * {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 宠物主体 */
.pet-main {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 宠物身体 */
.pet-body {
  position: absolute;
  top: 15rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 70rpx;
  height: 70rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  background-color: #667eea !important;
  border-radius: 50%;
  box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 添加光泽效果 */
  position: relative;
}

.pet-body::before {
  content: '';
  position: absolute;
  top: 10rpx;
  left: 15rpx;
  width: 20rpx;
  height: 20rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  z-index: 1;
}

/* 宠物耳朵 */
.pet-ear {
  position: absolute;
  width: 18rpx;
  height: 22rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  background-color: #667eea !important;
  border-radius: 50% 50% 0 0;
  top: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
}

.pet-ear.left {
  left: 18rpx;
  transform: rotate(-15deg);
}

.pet-ear.right {
  right: 18rpx;
  transform: rotate(15deg);
}

/* 眼睛 */
.pet-eye {
  position: absolute;
  width: 10rpx;
  height: 10rpx;
  background: white !important;
  background-color: white !important;
  border-radius: 50%;
  top: 20rpx;
  z-index: 2;
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
}

.pet-eye.left {
  left: 20rpx;
}

.pet-eye.right {
  right: 20rpx;
}

.pupil {
  width: 5rpx;
  height: 5rpx;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 嘴巴 */
.pet-mouth {
  position: absolute;
  bottom: 18rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 14rpx;
  height: 7rpx;
  border: 2rpx solid #333 !important;
  border-top: none !important;
  border-radius: 0 0 14rpx 14rpx;
  z-index: 2;
}

/* 四肢 */
.pet-limb {
  position: absolute;
  width: 10rpx;
  height: 18rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  background-color: #667eea !important;
  border-radius: 5rpx;
  bottom: 8rpx;
  box-shadow: 0 2rpx 6rpx rgba(102, 126, 234, 0.2);
}

.pet-limb.left {
  left: 18rpx;
}

.pet-limb.right {
  right: 18rpx;
}

/* 尾巴 */
.pet-tail {
  position: absolute;
  width: 8rpx;
  height: 24rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  background-color: #667eea !important;
  border-radius: 4rpx;
  right: 8rpx;
  top: 40rpx;
  transform: rotate(25deg);
  animation: tailWag 3s ease-in-out infinite;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
}

@keyframes tailWag {
  0%, 100% { transform: rotate(25deg); }
  50% { transform: rotate(45deg); }
}

/* 悬浮状态指示器 */
.floating-status {
  position: absolute;
  top: -15rpx;
  right: -15rpx;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.status-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #4caf50;
  border: 2rpx solid white;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
  animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.mood {
  background: #4caf50;
}

.status-dot.hunger {
  background: #ff9800;
}

.status-dot.energy {
  background: #2196f3;
}

.status-dot.low {
  background: #f44336;
  animation: statusAlert 1s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes statusAlert {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.5; }
}

/* 紧急状态指示器 */
.emergency-indicators {
  position: absolute;
  top: -25rpx;
  left: -25rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.emergency-indicator {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12rpx;
  animation: emergencyBlink 0.8s ease-in-out infinite;
  box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.3);
}

.emergency-indicator.mood-critical {
  background: #f44336;
}

.emergency-indicator.hunger-critical {
  background: #ff9800;
}

.emergency-indicator.energy-critical {
  background: #2196f3;
}

@keyframes emergencyBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.2); }
}

/* 动画状态 */
.idle {
  animation: idle 4s ease-in-out infinite;
}

.happy {
  animation: bounce 0.8s ease-in-out;
}

.excited {
  animation: excited 1s ease-in-out infinite;
}

.sad {
  animation: sad 3s ease-in-out infinite;
}

.dragging {
  transform: scale(1.1);
  filter: brightness(1.1);
}

@keyframes idle {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    filter: drop-shadow(0 8rpx 16rpx rgba(0, 0, 0, 0.15));
  }
  50% { 
    transform: translateY(-6rpx) rotate(1deg);
    filter: drop-shadow(0 12rpx 24rpx rgba(0, 0, 0, 0.2));
  }
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes excited {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 8rpx 16rpx rgba(102, 126, 234, 0.3));
  }
  25% { 
    transform: scale(1.05) rotate(-3deg);
    filter: drop-shadow(0 12rpx 24rpx rgba(102, 126, 234, 0.4));
  }
  75% { 
    transform: scale(1.05) rotate(3deg);
    filter: drop-shadow(0 12rpx 24rpx rgba(102, 126, 234, 0.4));
  }
}

@keyframes sad {
  0%, 100% { 
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 8rpx 16rpx rgba(0, 0, 0, 0.1));
  }
  50% { 
    transform: translateY(3rpx) scale(0.98);
    filter: drop-shadow(0 6rpx 12rpx rgba(0, 0, 0, 0.08));
  }
}

/* 响应式调整 */
@media screen and (max-width: 750rpx) {
  .floating-pet {
    width: 90rpx;
    height: 90rpx;
  }
  
  .pet-body {
    width: 65rpx;
    height: 65rpx;
    top: 12rpx;
  }
  
  .pet-ear {
    width: 16rpx;
    height: 20rpx;
    top: 6rpx;
  }
  
  .pet-ear.left {
    left: 16rpx;
  }
  
  .pet-ear.right {
    right: 16rpx;
  }
  
  .pet-eye {
    width: 9rpx;
    height: 9rpx;
    top: 18rpx;
  }
  
  .pet-eye.left {
    left: 18rpx;
  }
  
  .pet-eye.right {
    right: 18rpx;
  }
  
  .pet-mouth {
    bottom: 16rpx;
    width: 12rpx;
    height: 6rpx;
  }
  
  .pet-limb {
    width: 8rpx;
    height: 16rpx;
    bottom: 6rpx;
  }
  
  .pet-limb.left {
    left: 16rpx;
  }
  
  .pet-limb.right {
    right: 16rpx;
  }
  
  .pet-tail {
    width: 6rpx;
    height: 20rpx;
    right: 6rpx;
    top: 35rpx;
  }
}
</style>
